<template>
    <div class="dataset-info-container">
        <div class="dataset-header">
            <img src="http://localhost:8001/upload/car.webp" alt="">
            <div class="dataset-box">
                <div class="dataset-name">{{ props.plugin.name }}</div>
                <div class="dataset-info">
                    <div class="dataset-user">{{ props.plugin.username }}</div>
                    <div class="dataset-created">{{ props.plugin.created }}</div>
                    <div>10000次</div>
                    <div>实时更新</div>
                </div>
                <div class="dataset-describe">{{ props.plugin.describe }}</div>
                <div class="action">
                    <el-button type="primary">订阅 50/月</el-button>
                    <el-button type="primary" @click="handleConfig">配置</el-button>
                    <el-button type="primary" @click="handleChat">对话</el-button>
                </div>
            </div>
        </div>

        <div class="dataset-detail">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="详情" name="first">
                    1、每条数据上面都自定义了标签。这样，用户可以根据标签或者关键词来筛选数据。方便用户定义自己的数据集合。
                    <br>
                    2、用户也可以在筛选规则上面添加自定义的关键词。
                    <br>
                    3、也可以让AI总结一下每一篇文章，筛选对应的数据
                    <br>
                    4、插件也可以是prompt
                </el-tab-pane>
                <el-tab-pane label="数据预览" name="second">
                    1、表格数据
                    <br>
                    2、有链接的可以跳转？
                    <br>
                    3、数据对应的标签
                </el-tab-pane>
                <el-tab-pane label="评论" name="third">
                    1、数据质量真不错，3颗星
                    <br>
                    2、数据质量真不错，3颗星
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive ,inject} from 'vue'

const props = defineProps({
    plugin: {
        type: Object,
        default: {},
    }
})
const activeName = ref('first')



const userAction = inject('userAction')
const handleConfig = () => {
    userAction(props.plugin,'config')
}
const handleChat = () => {
    userAction(props.plugin,'chat')
}

const handleClick = (tab, event) => {
    console.log(tab, event)
    console.log(activeName.value);
}



</script>

<style scoped>
.dataset-info-container {
    padding: 20px;
}

.dataset-header {
    display: flex;
    margin-bottom: 10px;
    background: #fff;
}

.dataset-box>:nth-child(n) {
    padding-bottom: 5px;
}

.dataset-name {
    font-size: 26px;
    text-align: center;
}

.dataset-info {
    display: flex;
    justify-content: center;
}

.dataset-info>:nth-child(n) {
    padding-left: 10px;
    /* padding-bottom: 5px; */
    font-size: 14px;
}

.action {
    text-align: center;
}

.dataset-detail {
    background-color: #fff;
}

.plugin-config {
    border-top: 1px solid #eee;
    margin-top: 10px;
}
</style>

